import { Calendar } from "@/components";
import { useRef } from "react";
import { View, Image } from "@tarojs/components";
//import { useEffect } from "react";

import style from "./index.module.scss";
import { ImageStringFormat } from "@/data/shared/mediaTypes";

type calendarCollapseProps = {
  handleDateClick: Function;
  toggleCallback: Function;
  onChangeMonthCallback: (value: string) => any;
  backgroundImage?: ImageStringFormat;
};

export default function C19CalendarCollapse({
  handleDateClick,
  toggleCallback,
  onChangeMonthCallback,
  backgroundImage,
}: calendarCollapseProps) {
  const calendarRef: any = useRef();

  return (
    <View className={style["calendar-wrapper"]}>
      {backgroundImage && (
        <Image
          className={style["bg-image"]}
          mode="widthFix"
          src={backgroundImage}
        />
      )}
      <Calendar
        ref={calendarRef}
        canExpand
        view="week"
        onDayClick={handleDateClick}
        toggleCallback={toggleCallback}
        onChangeMonthCallback={onChangeMonthCallback}
      />
    </View>
  );
}
